<gm:page title="My App" authenticate="false" onload="onloadHandler()">

  <style>
    body {
      margin: 0px;
      padding: 0px;
    }
    a, a:link, a:hover, a:visited {
      color: black;
      font-weight: bold;
    }
    h1 {
      font-family: sans-serif;
      font-size: 20pt;
      margin: 0px;
      padding-left: 5px;
    }
    #gm-signin {
      display: none;
    }
    #publicationHeader {
      float: left;
    }
    #sectionBar {
      background-color: gray;
      margin-bottom: 10px"
    }
    #sectionBar a, #sectionBar a:link, #sectionBar a:hover, #sectionBar a:visited {
      color: white;
    }
  </style>

  <script>
    var USchoolFeed;
    var UHiddenNewsFeed;
    var UVisibleNewsFeed;
  
    function onloadHandler() {
      USchoolFeed = google.mashups.getObjectById('USchoolFeed');
      UHiddenNewsFeed = google.mashups.getObjectById('UHiddenNewsFeed');
      UVisibleNewsFeed = google.mashups.getObjectById('UVisibleNewsFeed');
    }
    function USchoolFeedRepaintHandler() {
      var schoolNameGPath = new GPath('gmd:schoolName');
      var publicationURLGPath = new GPath('atom:link/@href');
      var publicationNameGPath = new GPath('gmd:publicationName');
      var schoolColorGPath = new GPath('gmd:color');

      var USelect = document.getElementById('USelect');

      for (var i=0; i<USchoolFeed.getData().size(); i++) {
        var entry = USchoolFeed.getData().entryAt(i);

        var schoolName = schoolNameGPath.getValue(entry);
        var publicationURL = publicationURLGPath.getValue(entry);
        var publicationName = publicationNameGPath.getValue(entry);
        var schoolColor = schoolColorGPath.getValue(entry);

        USelect.appendChild(
          createUOption(schoolName, schoolColor, publicationURL, publicationName));
      }
    }
    function createUOption(schoolName, schoolColor, publicationURL, publicationName) {
      var UOption = document.createElement('option');

      UOption.publicationName = publicationName;
      UOption.innerHTML = schoolName;
      UOption.value = publicationURL;
      UOption.color = schoolColor;

      return UOption;
    }
    function changeNewsSource(USelect) {
      var UOption = USelect.options[USelect.selectedIndex];
      var sectionBar = document.getElementById('sectionBar');
      var publicationHeader = document.getElementById('publicationHeader');
      
      UHiddenNewsFeed.setData(UOption.value);
      sectionBar.innerHTML = '&nbsp;';

      if (UOption.value != '') {
        publicationHeader.innerHTML = UOption.publicationName;
        sectionBar.style.backgroundColor = UOption.color;
        
        var styleSheetRules = null;
        if (document.styleSheets[1].cssRules) {
          styleSheetRules = document.styleSheets[1].cssRules;
        } else {
          styleSheetRules = document.styleSheets[1].rules;
        }
        
        if (styleSheetRules) {
          for (var i=0; i<styleSheetRules.length; i++) {
            var rule = styleSheetRules[i];
            if (rule.selectorText == 'a, a:link, a:hover, a:visited') {
              rule.style.color = UOption.color;
            }
          }
        }
      }
      else {
        publicationHeader.innerHTML = '';
        sectionBar.style.backgroundColor = 'gray';
      }
    }
    function UHiddenNewsFeedRepaintHandler() {
      var USelect = document.getElementById('USelect');
      var UOption = USelect.options[USelect.selectedIndex];
      
      deleteList(UVisibleNewsFeed);
      
      var testEntry = UHiddenNewsFeed.getData().entryAt(0);
      if (new GPath('ns1836416130:issuedate').getValue(testEntry)) {
        formatAsCollegePublisher();
      } else {
        for (var i=0; i<UHiddenNewsFeed.getData().size(); i++) {
          var entry = UHiddenNewsFeed.getData().entryAt(i);
          UVisibleNewsFeed.getData().addEntry(GPath.cloneEntry(entry));
        }
      }
    }
    function formatAsCollegePublisher() {
      var sectionBar = document.getElementById('sectionBar');
      
      var sectionsArr = [];
      for (var i=0; i<UHiddenNewsFeed.getData().size(); i++) {
        var entry = UHiddenNewsFeed.getData().entryAt(i);
        var entrySection = new GPath('ns1836416130:section').getValue(entry);
          
        var sectionFound = false;
        for (var j=0; j<sectionsArr.length; j++) {
          if (entrySection == sectionsArr[j]) {
            sectionFound = true;
            break;
          }
        }
        if (!sectionFound) {
          sectionsArr.push(entrySection);
        }
      }
      
      for (var k=0; k<sectionsArr.length; k++) {
        sectionBar.innerHTML += '<a href="#" onclick="showStoriesBySection('+"'"+sectionsArr[k]+"'"+')">' + sectionsArr[k] + '</a>';
        sectionBar.innerHTML += '&nbsp;&nbsp;';
      }
    }
    function showStoriesBySection(sectionName) {
      deleteList(UVisibleNewsFeed);
    
      for (var i=0; i<UHiddenNewsFeed.getData().size(); i++) {
        var entry = UHiddenNewsFeed.getData().entryAt(i);
        
        if (new GPath('ns1836416130:section').getValue(entry) == sectionName) {
          UVisibleNewsFeed.getData().addEntry(GPath.cloneEntry(entry));
        }
      }
    }
    function deleteList(list) {
      while (list.getData().size() > 0) {
        list.getData().removeEntry(list.getData().entryAt(0));
      }
    }
  </script>
  
  <gm:list id="USchoolFeed" data="${app}/U" style="display:none">
    <gm:handleEvent event="repaint" execute="USchoolFeedRepaintHandler()"/>
  </gm:list>
  <gm:list id="UHiddenNewsFeed" pagesize="1000" style="display:none">
    <gm:handleEvent event="repaint" execute="UHiddenNewsFeedRepaintHandler()"/>
  </gm:list>
  
  <div style="width:100%">
    <h1 id="publicationHeader">&nbsp;</h1>
    <div style="padding-bottom:5px; padding-right:5px" align="right">
      <select id="USelect" onchange="changeNewsSource(this)">
        <option value="">- SCHOOLS -</option>
      </select>
    </div>
    <div id="sectionBar">&nbsp;</div>
  </div>
  
  
  <gm:list id="UVisibleNewsFeed" data="${tmp}/UArticles" pagesize="1000" template="UVisibleNewsFeedTemplate/>
  
  <gm:template id="UVisibleNewsFeedTemplate">
    <div repeat="true">
      <gm:link ref="atom:link/@href" labelref="atom:title"/>&nbsp;-&nbsp;<i><gm:date ref="atom:published"/></i>
      <gm:html ref="atom:summary"/>
    </div>
  </gm:template>

</gm:page>